<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <script src="../js/dayjs.min.js"></script>
    </head>
    <body>

        <!-- 
            过滤器：
                定义：对数据进行特定格式化后再显示（适用于简单逻辑的处理）
                语法：
                    1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
                    2.使用过滤器：{{xxx | 过滤器名}}
            备注：
                1.过滤器可以额外接受参数，多个过滤器也可以串联
                2.没有改变原本的数据，产生了新的对应的数据
         -->
         <div id="root">
             <h2>显示格式化后的时间</h2>
             <!-- 计算属性实现 -->
             <h3>现在是：{{fmtTime}}</h3>
             <!-- methods实现 -->
             <h3>现在是：{{getFmtTime()}}</h3>
             <!-- 过滤器实现 -->
             <h3>现在是：{{time | timeFormater}}</h3>
            <!-- 过滤器实现(传参) -->
            <h3>现在是：{{time | timeFormater("YYYY_MM_DD") | mySlice}}</h3>
         </div>
        <script>
            Vue.config.productionTip = false;
            Vue.filter("mySlice",function(value){
                    return value.slice(0, 4);
                });
            new Vue({
                el:"#root",
                data:{
                    time: Date.now()
                },
                computed:{
                    fmtTime(){
                        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
                    }
                },
                methods:{
                    getFmtTime(){
                         return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
                    }
                },
                filters:{
                    timeFormater(value,str= "YYYY年MM月DD日 HH:mm:ss"){
                        return dayjs(value).format(str);
                    },
                  
                }
                
            })


        </script>
    </body>
</html>